import {Component} from 'react';
import WithRouter from '../../router/WithRouter';
import bus from '../../utils/bus';
import NavCss from './navBar.module.css'
class NavBar extends Component{
    state={
        isShow:false
    }
    render(){
        console.log(this.props)
        let {isShow} = this.state;
        return(
            <div className={isShow?`${NavCss.navbar} ${NavCss.show}`:`${NavCss.navbar} ${NavCss.hide}`}>
                <ul>
                    <li className={NavCss.nav} onClick={()=>this.goPage('/')}>
                        <span>首页</span>
                        <span>
                        <i className="fa fa-angle-right fa-lg"></i> 
                        </span>
                    </li>
                    <li className={NavCss.nav} onClick={()=>this.goPage('/cate')}>
                    <span>分类</span>
                        <span>
                        <i className="fa fa-angle-right fa-lg"></i> 
                        </span>
                    </li>
                    <li className={NavCss.nav} onClick={()=>this.goPage('/tuijian')}>
                    <span>推荐</span>
                        <span>
                        <i className="fa fa-angle-right fa-lg"></i> 
                        </span>
                    </li>
                    <li className={NavCss.nav} onClick={()=>this.goPage('/mine')}>
                    <span>我的</span>
                        <span>
                        <i className="fa fa-angle-right fa-lg"></i> 
                        </span>
                    </li>
                </ul>
            </div>
        )
    }
    componentDidMount(){
        // 订阅事件
        bus.on("isshow",()=>{
           this.setState({
            isShow:!this.state.isShow
           })
        })
    }
    goPage(url){
        this.setState({
            isShow:false
        })
        this.props.router.navigate(url)
      
    }
}
export default WithRouter(NavBar)